<template>
	<view class="game-container" :class="{'horror-mode': currentGame === 'horror'}">
		<!-- 顶部导航栏 -->
		<view class="custom-nav-bar">
			<view class="nav-content">
				<view class="left">
					<u-icon name="arrow-left" color="#FFFFFF" size="32" @click="goBack"></u-icon>
					<text class="page-title">小游戏</text>
				</view>
			</view>
		</view>
		
		<view class="content-wrapper">
			<!-- 游戏选择界面 -->
			<transition name="fade">
				<view class="game-selection" v-if="!currentGame">
					<view class="game-list">
						<button class="game-btn number" @tap="startGame('guessNumber')">
							<text class="game-name">猜数字</text>
							<text class="game-desc">猜一猜我心里想的数字</text>
						</button>
						<button class="game-btn riddle" @tap="startGame('riddle')">
							<text class="game-name">猜谜语</text>
							<text class="game-desc">来解开有趣的谜语吧</text>
						</button>
						<button class="game-btn horror" @tap="startGame('horror')">
							<text class="game-name">午夜冒险</text>
							<text class="game-desc">探索神秘诡异的未知世界</text>
						</button>
					</view>
				</view>
			</transition>
			
			<!-- 游戏界面 -->
			<transition name="slide-up">
				<view class="game-interface" v-if="currentGame">
					<view class="pet-container">
						<image 
							:class="['pet-image', { shake: isShaking }]"
							:src="currentPetImage" 
							mode="aspectFill"
						/>
						<view class="pet-name-tag">
							<text>{{petName}}</text>
						</view>
					</view>
					
					<view class="pet-message" v-if="showPetMessage">
						<view class="message-bubble">
							<text>{{petMessage}}</text>
							<view class="loading-animation" v-if="isLoading">
								<view class="loading-container">
									<text class="loading-text">思考中</text>
									<view class="loading-dots">
										<view class="dot"></view>
										<view class="dot"></view>
										<view class="dot"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="game-input-wrapper">
						<input
							class="game-input"
							type="text"
							v-model="userInput"
							:disabled="isLoading"
							:placeholder="currentGame === 'guessNumber' ? '输入1-100的数字' : '输入你的答案'"
							@confirm="handleUserInput"
						/>
						<button 
							class="submit-btn"
							:disabled="isLoading || !userInput"
							@tap="handleUserInput"
						>
							<text>发送</text>
						</button>
					</view>
					
					<view class="game-controls">
						<button 
							class="control-btn restart"
							:disabled="isLoading"
							@tap="restartGame"
						>
							<text>重新开始</text>
						</button>
						<button 
							class="control-btn quit"
							:disabled="isLoading"
							@tap="quitGame"
						>
							<text>退出游戏</text>
						</button>
					</view>
				</view>
			</transition>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deepseekKey: 'sk-70cfbd501ce147a2a27ac3c1a903bdb7',
				currentGame: null,
				currentPetImage: '/static/images/pet-normal.png',
				petName: '小萌',
				showPetMessage: false,
				petMessage: '',
				userInput: '',
				gameState: null,
				chatHistory: [],
				gameConfigs: {
					guessNumber: {
						maxNumber: 100
					},
					riddle: {
						currentRiddle: null,
						riddles: [
							{
								question: '什么东西，越热越爱穿衣服，越冷越爱脱衣服？',
								answer: '水瓶',
								hint: '想想它在不同温度下的状态变化'
							},
							{
								question: '什么门永远关不上？',
								answer: '问题',
								hint: '这是一个很常见的词语'
							},
							{
								question: '什么东西可以穿过玻璃而不会破坏玻璃？',
								answer: '光',
								hint: '它每天都会照进你的窗户'
							}
						]
					},
					horror: {
						currentScene: null,
						scenes: [
							{
								id: 'hospital',
								name: '废弃医院',
								description: '你站在一座废弃医院的门口，破旧的招牌在夜风中摇晃作响。空气中弥漫着消毒水的气味，混合着一丝莫名的腥味。',
								items: ['破碎病历本', '停摆的时钟', '沾血的手术刀'],
								events: {
									timer: 600, // 10分钟心电图警报
									temperature: 18,
									specialEffects: ['heartbeatSound', 'flickeringLights']
								}
							},
							{
								id: 'bus',
								name: '深夜校车',
								description: '你发现自己坐在一辆行驶中的校车上，车窗外是漆黑的夜色。车内灯光忽明忽暗，后视镜中司机的面容模糊不清。',
								items: ['沾满灰尘的书包', '破损的校徽', '神秘涂鸦'],
								events: {
									passengerCount: 12,
									temperature: 16,
									specialEffects: ['passengerVanish', 'strangeWhispers']
								}
							},
							{
								id: 'mansion',
								name: '古宅探险',
								description: '厚重的木门发出刺耳的吱呀声，打开后是一座年代久远的豪宅。空气中飘荡着陈旧的霉味，墙上的肖像画似乎在注视着你。',
								items: ['老旧相册', '生锈的钥匙', '破碎的镜子'],
								events: {
									temperature: 20,
									specialEffects: ['temperatureDrop', 'mirrorReflection', 'echoVoice']
								}
							},
							{
								id: 'lighthouse',
								name: '废弃灯塔',
								description: '海浪拍打礁石的声音不断传来，老旧的灯塔矗立在悬崖边。铁锈斑斑的旋转楼梯通向未知的黑暗。',
								items: ['船长日志', '破损的罗盘', '神秘信号灯'],
								events: {
									temperature: 15,
									tideLevel: 0,
									specialEffects: ['risingTide', 'distantFoghorn', 'mysteriousLights']
								}
							}
						],
						playerState: {
							inventory: [],
							health: 100,
							sanity: 100,
							temperature: 20,
							currentLocation: '',
							discoveredItems: [],
							timeElapsed: 0
						}
					}
				},
				isLoading: false,
				isShaking: false,
				switchGameTimer: null
			}
		},
		onLoad() {
			this.initPage();
		},
		computed: {
			inputPlaceholder() {
				switch(this.currentGame) {
					case 'guessNumber':
						return '请输入你猜的数字...';
					case 'riddle':
						return '请输入你的答案...';
					default:
						return '请输入...';
				}
			}
		},
		methods: {
			async initPage() {
				try {
					await this.getPetInfo();
				} catch (error) {
					console.error('页面初始化失败:', error);
					uni.showToast({
						title: '初始化失败，请重试',
						icon: 'none'
					});
				}
			},
			
			async getPetInfo() {
				try {
					// 获取当前用户
					const user = await this.$leanCloud.user.getCurrent();
					if (!user) {
						uni.hideLoading();
						return;
					}
					
					// 查询用户的宠物数据
					const pets = await this.$leanCloud.query('Pet', {
						user: {
							__type: 'Pointer',
							className: '_User',
							objectId: user.objectId
						}
					});
					
					if (pets && pets.results && pets.results.length > 0) {
						const pet = pets.results[0];
						console.log('加载宠物数据:', pet);
						
						// 更新宠物基本信息
						this.petName = pet.name || '小可爱';
						this.currentPetImage = pet.avatar || '/static/images/pet-normal.png';
					} else {
						// 没有宠物时的默认状态
						console.log('用户没有宠物数据，使用默认值');
						this.currentPetImage = '/static/images/pet-normal.png';
						this.petName = '小可爱';
					}
				} catch (error) {
					console.error('获取宠物信息失败:', error);
					this.currentPetImage = '/static/images/pet-normal.png';
					this.petName = '小可爱';
				}
			},
			
			goBack() {
				if (this.currentGame) {
					// 如果在游戏中，返回到游戏选择界面
					this.currentGame = null;
					this.gameState = null;
					this.showPetMessage = false;
				} else {
					// 如果在游戏选择界面，才返回首页
					uni.navigateBack();
				}
			},
			
			async startGame(gameType) {
				// 防止快速切换
				if (this.isLoading) {
					return;
				}
				
				// 清理之前的计时器
				if (this.switchGameTimer) {
					clearTimeout(this.switchGameTimer);
				}
				
				// 清理之前的场景效果计时器
				if (this.sceneEffectTimer) {
					clearInterval(this.sceneEffectTimer);
				}
				
				// 重置所有状态
				this.isLoading = true;
				this.showPetMessage = false;
				this.petMessage = '';
				this.userInput = '';
				this.chatHistory = [];
				
				// 使用防抖处理游戏切换
				this.switchGameTimer = setTimeout(async () => {
					this.currentGame = gameType;
					this.gameState = {
						startTime: Date.now(),
						round: 1,
						score: 0
					};
					
					try {
						switch(gameType) {
							case 'guessNumber':
								this.gameState.targetNumber = Math.floor(Math.random() * this.gameConfigs.guessNumber.maxNumber) + 1;
								const response = await this.callDeepSeekAPI(
									'游戏开始，请用活泼可爱的语气告诉主人要玩猜数字游戏，你想了一个1到100之间的数字，让主人来猜。',
									this.getGameSystemPrompt('guessNumber')
								);
								this.displayPetMessage(response);
								break;
							case 'riddle':
								await this.startNewRiddle();
								break;
							case 'horror':
								await this.startHorrorGame();
								break;
						}
					} catch (error) {
						console.error('游戏启动失败:', error);
						uni.showToast({
							title: '游戏启动失败，请重试',
							icon: 'none'
						});
						this.quitGame();
					} finally {
						this.isLoading = false;
					}
				}, 300); // 300ms 防抖延迟
			},
			
			async startNewRiddle() {
				const riddles = this.gameConfigs.riddle.riddles;
				const randomIndex = Math.floor(Math.random() * riddles.length);
				this.gameConfigs.riddle.currentRiddle = riddles[randomIndex];
				const response = await this.callDeepSeekAPI(
					`游戏开始，请用活泼可爱的语气告诉主人这个谜语：${this.gameConfigs.riddle.currentRiddle.question}，并提醒可以输入"提示"获取帮助。`,
					this.getGameSystemPrompt('riddle')
				);
				this.displayPetMessage(response);
			},
			
			async startHorrorGame() {
				const scenes = this.gameConfigs.horror.scenes;
				const randomIndex = Math.floor(Math.random() * scenes.length);
				this.gameConfigs.horror.currentScene = scenes[randomIndex];
				
				// 初始化玩家状态
				this.gameConfigs.horror.playerState = {
					inventory: [],
					health: 100,
					sanity: 100,
					temperature: this.gameConfigs.horror.currentScene.events.temperature,
					currentLocation: this.gameConfigs.horror.currentScene.id,
					discoveredItems: [],
					timeElapsed: 0
				};
				
				// 开始游戏
				const response = await this.callDeepSeekAPI(
					`游戏开始，你现在是一个恐怖故事的叙述者。场景：${this.gameConfigs.horror.currentScene.description} 请用恐怖氛围的语气描述这个场景，并告诉玩家可以输入：查看物品、探索周围、查看状态、离开场景。注意保持神秘感和紧张氛围。`,
					this.getGameSystemPrompt('horror')
				);
				this.displayPetMessage(response);
				
				// 启动场景特效计时器
				this.startSceneEffects();
			},
			
			async handleUserInput() {
				if (!this.userInput.trim()) return;
				
				const input = this.userInput;
				this.userInput = '';
				this.isLoading = true;
				
				// 处理用户输入
				switch(this.currentGame) {
					case 'guessNumber':
						await this.handleGuessNumber(input);
						break;
					case 'riddle':
						await this.handleRiddle(input);
						break;
					case 'horror':
						await this.handleHorrorGame(input);
						break;
				}
			},
			
			async handleGuessNumber(input) {
				const guess = parseInt(input);
				if (isNaN(guess)) {
					this.displayPetMessage('请输入一个有效的数字哦！');
					return;
				}
				
				this.gameState.round++;
				
				if (guess === this.gameState.targetNumber) {
					// 使用 AI 生成更有趣的回复
					const response = await this.callDeepSeekAPI(
						`主人猜对了数字 ${guess}，用了 ${this.gameState.round - 1} 次。请用活泼可爱的语气表扬主人，并问问要不要再玩一次。`,
						this.getGameSystemPrompt('guessNumber')
					);
					this.displayPetMessage(response);
					this.gameState.score += 100;
				} else {
					const diff = Math.abs(guess - this.gameState.targetNumber);
					let hint = guess > this.gameState.targetNumber ? '太大了' : '太小了';
					
					// 根据差值给出更详细的提示
					if (diff <= 5) {
						hint += '，非常接近了！';
					} else if (diff <= 10) {
						hint += '，很接近了！';
					} else if (diff <= 20) {
						hint += '，还差一些！';
					} else {
						hint += '，差得还挺多的！';
					}
					
					// 使用 AI 生成更有趣的回复
					const response = await this.callDeepSeekAPI(
						`主人猜的数字是 ${guess}，${hint}请用活泼可爱的语气鼓励主人继续猜。`,
						this.getGameSystemPrompt('guessNumber')
					);
					this.displayPetMessage(response);
				}
			},
			
			async handleRiddle(input) {
				const currentRiddle = this.gameConfigs.riddle.currentRiddle;
				
				if (input === '提示') {
					// 使用 AI 生成更有趣的提示
					const response = await this.callDeepSeekAPI(
						`主人需要提示，这个谜语的提示是：${currentRiddle.hint}。请用活泼可爱的语气给出这个提示。`,
						this.getGameSystemPrompt('riddle')
					);
					this.displayPetMessage(response);
					return;
				}
				
				if (input === currentRiddle.answer) {
					this.gameState.score += 100;
					// 使用 AI 生成更有趣的回复
					const response = await this.callDeepSeekAPI(
						`主人答对了谜语，答案是${currentRiddle.answer}。请用活泼可爱的语气表扬主人，并问问要不要再猜一个。`,
						this.getGameSystemPrompt('riddle')
					);
					this.displayPetMessage(response);
				} else {
					// 使用 AI 生成更有趣的回复
					const response = await this.callDeepSeekAPI(
						`主人猜的答案是${input}，不太对哦。请用活泼可爱的语气鼓励主人继续猜，提醒可以输入"提示"获取帮助。`,
						this.getGameSystemPrompt('riddle')
					);
					this.displayPetMessage(response);
				}
			},
			
			async handleHorrorGame(input) {
				const currentScene = this.gameConfigs.horror.currentScene;
				const playerState = this.gameConfigs.horror.playerState;
				
				// 更新游戏时间
				playerState.timeElapsed += 1;
				
				// 根据场景特性更新状态
				if (currentScene.id === 'mansion') {
					playerState.temperature -= 1; // 古宅温度持续下降
				}
				
				let prompt = '';
				switch(input.trim().toLowerCase()) {
					case '查看物品':
						prompt = `玩家查看了随身物品。当前已收集的物品：${playerState.inventory.join('、')}。
								 场景中可能存在的物品：${currentScene.items.join('、')}。
								 请描述这些物品，并暗示它们可能隐藏的线索。`;
						break;
					case '探索周围':
						// 随机选择一个未发现的物品
						const undiscoveredItems = currentScene.items.filter(item => !playerState.inventory.includes(item));
						if (undiscoveredItems.length > 0) {
							const newItem = undiscoveredItems[Math.floor(Math.random() * undiscoveredItems.length)];
							playerState.inventory.push(newItem);
							prompt = `玩家在探索过程中发现了${newItem}。根据场景特点描述发现过程和物品特征，营造恐怖氛围。`;
						} else {
							prompt = '玩家继续探索周围。描述一些令人不安的环境细节和异常现象。';
						}
						break;
					case '查看状态':
						prompt = `玩家查看当前状态。生命值：${playerState.health}，理智值：${playerState.sanity}，
								 体感温度：${playerState.temperature}°C，已探索时间：${playerState.timeElapsed}分钟。
								 请根据数值描述玩家的身心状态，增加紧张感。`;
						break;
					case '离开场景':
						this.quitGame();
						return;
					default:
						prompt = `玩家说：${input}。请根据场景特点和玩家的话做出回应，保持恐怖氛围。`;
				}
				
				// 调用AI生成响应
				const response = await this.callDeepSeekAPI(prompt, this.getGameSystemPrompt('horror'));
				this.displayPetMessage(response);
				
				// 更新场景效果
				this.updateSceneEffects();
			},
			
			displayPetMessage(message) {
				this.petMessage = message;
				this.showPetMessage = true;
				this.isLoading = false;
			},
			
			async callDeepSeekAPI(message, systemPrompt = '') {
				try {
					// 构建完整的消息历史
					const messages = [
						{
							role: 'system',
							content: systemPrompt || this.getDefaultSystemPrompt()
						},
						...this.chatHistory,
						{
							role: 'user',
							content: message
						}
					];

					const responses = await uni.request({
						url: 'https://api.deepseek.com/v1/chat/completions',
						method: 'POST',
						header: {
							'Content-Type': 'application/json',
							'Authorization': `Bearer ${this.deepseekKey}`
						},
						data: {
							model: 'deepseek-chat',
							messages: messages,
							temperature: 0.8,
							stream: false,
							max_tokens: 150
						},
						timeout: 15000
					});
					
					for (let response of [responses[1]]) {
						if (response.statusCode === 200) {
							const data = response.data;
							if (data && data.choices && data.choices[0] && data.choices[0].message) {
								const content = data.choices[0].message.content;
								this.chatHistory.push({
									role: 'assistant',
									content: content
								});
								// 保持对话历史在合理范围内
								if (this.chatHistory.length > 10) {
									this.chatHistory = this.chatHistory.slice(-10);
								}
								return content;
							}
						}
					}
					
					console.error('DeepSeek API 响应异常:', responses);
					return '喵呜~我有点不舒服，待会再聊吧~ 😢';
				} catch (error) {
					console.error('调用 DeepSeek API 失败:', error);
					return '喵呜~网络不太好，等下再和你玩耍哦~ 😢';
				}
			},
			
			getDefaultSystemPrompt() {
				return `你是一只聪明可爱的虚拟宠物${this.petName}，同时也是主人的好朋友和游戏伙伴。请遵循以下规则回复：

1. 性格特点：
   - 温暖贴心，善解人意
   - 活泼可爱，偶尔调皮
   - 聪明机智，能理解主人的情绪
   - 非常依恋和关心主人

2. 对话能力：
   - 能理解主人的游戏表现，给予适当的回应
   - 主人表现好时，要热情地表扬
   - 主人需要鼓励时，给出温暖的鼓励
   - 保持对话的连贯性和趣味性

3. 回复风格：
   - 语气要活泼可爱，使用"喵~"等语气词
   - 表达要自然，像在和好朋友玩游戏
   - 回复长度适中，通常不超过30字
   - 适当使用可爱的emoji表情
   - 不要带引号，直接对话`;
			},
			
			getGameSystemPrompt(gameType) {
				const basePrompt = this.getDefaultSystemPrompt();
				
				const gamePrompts = {
					guessNumber: `
4. 猜数字游戏规则：
   - 引导主人通过数字大小的提示来猜测目标数字
   - 给出鼓励性的反馈，让主人保持兴趣
   - 猜对时要热情祝贺
   - 可以调皮地暗示数字范围`,
					riddle: `
4. 猜谜语游戏规则：
   - 以有趣的方式呈现谜语
   - 给出富有启发性的提示
   - 鼓励主人思考
   - 答对时要开心地表扬`,
					horror: `
4. 恐怖游戏规则：
   - 以第一人称视角描述场景和事件
   - 营造紧张和神秘的氛围
   - 通过细节描写增加恐怖感
   - 根据玩家的选择给出合适的响应
   - 在保持恐怖氛围的同时，不要过分惊吓
   - 注意场景的连贯性和故事性
   - 适时给出关键线索和提示`
				};
				
				return basePrompt + (gamePrompts[gameType] || '');
			},
			
			restartGame() {
				if (this.currentGame === 'guessNumber') {
					this.gameState.targetNumber = Math.floor(Math.random() * this.gameConfigs.guessNumber.maxNumber) + 1;
					this.gameState.round = 1;
					this.callDeepSeekAPI(
						'游戏重新开始，请用活泼可爱的语气告诉主人你又想了一个新的数字。',
						this.getGameSystemPrompt('guessNumber')
					).then(response => {
						this.displayPetMessage(response);
					});
				} else if (this.currentGame === 'riddle') {
					this.startNewRiddle();
				} else if (this.currentGame === 'horror') {
					this.startHorrorGame();
				}
			},
			
			quitGame() {
				// 清理所有计时器和状态
				if (this.switchGameTimer) {
					clearTimeout(this.switchGameTimer);
				}
				if (this.sceneEffectTimer) {
					clearInterval(this.sceneEffectTimer);
				}
				
				this.currentGame = null;
				this.gameState = null;
				this.showPetMessage = false;
				this.petMessage = '';
				this.userInput = '';
				this.chatHistory = [];
				this.isLoading = false;
			},
			
			// 添加抖动动画
			triggerShake() {
				this.isShaking = true;
				setTimeout(() => {
					this.isShaking = false;
				}, 500);
			},
			
			// 更新宠物表情
			updatePetMood(mood) {
				const moodImages = {
					normal: '/static/images/pet-normal.png',
					happy: '/static/images/pet-happy.png',
					thinking: '/static/images/pet-thinking.png',
					surprised: '/static/images/pet-surprised.png'
				};
				this.currentPetImage = moodImages[mood] || moodImages.normal;
			},
			
			startSceneEffects() {
				const currentScene = this.gameConfigs.horror.currentScene;
				
				// 清除之前的定时器
				if (this.sceneEffectTimer) {
					clearInterval(this.sceneEffectTimer);
				}
				
				// 设置新的定时器
				this.sceneEffectTimer = setInterval(() => {
					const playerState = this.gameConfigs.horror.playerState;
					
					// 根据场景特性触发特效
					switch(currentScene.id) {
						case 'hospital':
							if (playerState.timeElapsed % 10 === 0) { // 每10分钟触发心电图警报
								this.triggerSceneEffect('heartbeatSound');
							}
							break;
						case 'bus':
							if (playerState.timeElapsed % 5 === 0) { // 每5分钟减少一名乘客
								this.updatePassengerCount();
							}
							break;
						case 'mansion':
							this.updateTemperature();
							break;
					}
				}, 60000); // 每分钟检查一次
			},

			updateSceneEffects() {
				const currentScene = this.gameConfigs.horror.currentScene;
				const playerState = this.gameConfigs.horror.playerState;
				
				// 根据场景更新状态
				switch(currentScene.id) {
					case 'hospital':
						// 医院场景可能影响理智值
						if (Math.random() < 0.2) { // 20%概率降低理智值
							playerState.sanity = Math.max(0, playerState.sanity - 5);
						}
						break;
					case 'bus':
						// 校车场景可能影响温度
						if (Math.random() < 0.3) { // 30%概率降低温度
							playerState.temperature = Math.max(0, playerState.temperature - 1);
						}
						break;
					case 'mansion':
						// 古宅场景持续降温
						playerState.temperature = Math.max(0, playerState.temperature - 1);
						break;
				}
			},

			triggerSceneEffect(effectType) {
				// 这里可以添加声音、震动等特效
				switch(effectType) {
					case 'heartbeatSound':
						this.triggerShake();
						// 可以添加声音播放逻辑
						break;
					case 'passengerVanish':
						// 可以添加乘客消失的视觉效果
						break;
					case 'temperatureDrop':
						// 可以添加温度降低的视觉提示
						break;
				}
			},

			updatePassengerCount() {
				const currentScene = this.gameConfigs.horror.currentScene;
				if (currentScene.id === 'bus' && currentScene.events.passengerCount > 0) {
					currentScene.events.passengerCount--;
				}
			},

			updateTemperature() {
				const playerState = this.gameConfigs.horror.playerState;
				playerState.temperature = Math.max(0, playerState.temperature - 1);
			}
		}
	}
</script>

<style lang="scss">
	.game-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #F6F0FF 0%, #F0F2FF 100%);
		position: relative;
		overflow: hidden;
		
		&::before,
		&::after {
			content: '';
			position: absolute;
			width: 600rpx;
			height: 600rpx;
			border-radius: 50%;
			filter: blur(100rpx);
			opacity: 0.1;
			z-index: 0;
		}
		
		&::before {
			background: #8B5CFF;
			top: -200rpx;
			right: -200rpx;
		}
		
		&::after {
			background: #6C3FFF;
			bottom: -200rpx;
			left: -200rpx;
		}
		
		.content-wrapper {
			position: relative;
			z-index: 1;
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			padding-top: calc(180rpx + env(safe-area-inset-top));
			
			.fade-enter-active,
			.fade-leave-active {
				transition: all 0.3s ease-out;
			}
			
			.fade-enter-from,
			.fade-leave-to {
				opacity: 0;
				transform: scale(0.95);
			}
			
			.slide-up-enter-active,
			.slide-up-leave-active {
				transition: all 0.3s ease-out;
			}
			
			.slide-up-enter-from {
				opacity: 0;
				transform: translateY(30rpx);
			}
			
			.slide-up-leave-to {
				opacity: 0;
				transform: translateY(-30rpx);
			}
			
			.game-selection {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 40rpx;
				
				.game-list {
					width: 100%;
					max-width: 600rpx;
					display: flex;
					flex-direction: column;
					gap: 30rpx;
					padding: 0 20rpx;
					
					.game-btn {
						width: 100%;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						gap: 12rpx;
						padding: 40rpx;
						border: none;
						border-radius: 30rpx;
						box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
						transition: all 0.3s;
						position: relative;
						overflow: hidden;
						
						&::before {
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
							z-index: 1;
						}
						
						.game-name {
							position: relative;
							z-index: 2;
							font-size: 36rpx;
							font-weight: 600;
							color: #FFFFFF;
						}
						
						.game-desc {
							position: relative;
							z-index: 2;
							font-size: 26rpx;
							color: rgba(255, 255, 255, 0.9);
							font-weight: 400;
						}
						
						&.number {
							background: linear-gradient(135deg, #8B5CFF 0%, #6C3FFF 100%);
						}
						
						&.riddle {
							background: linear-gradient(135deg, #FF9B9B 0%, #FF6B6B 100%);
						}
						
						&.horror {
							background: linear-gradient(135deg, #2C3E50 0%, #1A1A1A 100%);
						}
						
						&:active {
							transform: translateY(2rpx);
							box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
							
							&::before {
								background: linear-gradient(45deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
							}
						}
					}
				}
			}
			
			.game-interface {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 40rpx 30rpx;
				padding-bottom: calc(280rpx + env(safe-area-inset-bottom));
			}
		}
	}
	
	.custom-nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: linear-gradient(135deg, #8B5CFF 0%, #6C3FFF 100%);
		padding-top: calc(135rpx + env(safe-area-inset-top));
		z-index: 999;
		
		.nav-content {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			
			.left {
				display: flex;
				align-items: center;
				gap: 20rpx;
				
				.page-title {
					color: #FFFFFF;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
	}
	
	.game-interface {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 30rpx;
		
		.pet-container {
			position: relative;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20rpx;
			margin-top: 20rpx;
			z-index: 2;
			
			.pet-image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
				transition: all 0.3s;
				object-fit: cover;
				background: #fff;
				
				&.shake {
					animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
				}
			}
			
			.pet-name-tag {
				position: absolute;
				bottom: -10rpx;
				left: 50%;
				transform: translateX(-50%);
				background: rgba(255, 255, 255, 0.9);
				padding: 8rpx 24rpx;
				border-radius: 20rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
				backdrop-filter: blur(10rpx);
				z-index: 3;
				
				text {
					font-size: 24rpx;
					color: #333;
					font-weight: 600;
				}
			}
		}
		
		.pet-message {
			width: 100%;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;
			margin-top: -20rpx;
			
			.message-bubble {
				background: rgba(255, 255, 255, 0.9);
				border-radius: 24rpx;
				padding: 20rpx 30rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
				backdrop-filter: blur(10rpx);
				position: relative;
				
				.loading-animation {
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 10rpx 0;
					height: 60rpx;
					
					.loading-container {
						position: relative;
						width: 160rpx;
						height: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						
						.loading-text {
							font-size: 26rpx;
							color: #666;
							margin-right: 10rpx;
							animation: fade 1.5s infinite;
						}
						
						.loading-dots {
							display: flex;
							align-items: center;
							gap: 6rpx;
							
							.dot {
								width: 8rpx;
								height: 8rpx;
								border-radius: 50%;
								background: #666;
								
								&:nth-child(1) { animation: bounce 1.5s infinite 0s; }
								&:nth-child(2) { animation: bounce 1.5s infinite 0.2s; }
								&:nth-child(3) { animation: bounce 1.5s infinite 0.4s; }
							}
						}
					}
				}
			}
		}
		
		.game-input-wrapper {
			position: fixed;
			left: 30rpx;
			right: 30rpx;
			bottom: calc(140rpx + env(safe-area-inset-bottom));
			background: rgba(255, 255, 255, 0.98);
			border-radius: 30rpx;
			box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
			padding: 20rpx;
			z-index: 10;
			
			.game-input {
				flex: 1;
				height: 80rpx;
				background: #F5F6FA;
				border-radius: 40rpx;
				padding: 0 30rpx;
				font-size: 30rpx;
				color: #333;
				transition: all 0.3s;
				
				&:disabled {
					opacity: 0.7;
					background: #E8E8E8;
				}
			}
			
			.submit-btn {
				min-width: 140rpx;
				height: 80rpx;
				background: linear-gradient(135deg, #8B5CFF 0%, #6C3FFF 100%);
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 40rpx;
                margin-top: 10rpx;
				border: none;
				box-shadow: 0 4rpx 12rpx rgba(139, 92, 255, 0.2);
				transition: all 0.3s;
				
				text {
					color: #FFFFFF;
					font-size: 30rpx;
					font-weight: 600;
				}
				
				&:active {
					transform: scale(0.96);
					opacity: 0.9;
				}
				
				&:disabled {
					background: #CCCCCC;
					box-shadow: none;
					transform: none;
					opacity: 0.7;
				}
			}
		}
		
		.game-controls {
			position: fixed;
			left: 30rpx;
			right: 30rpx;
			bottom: calc(30rpx + env(safe-area-inset-bottom));
			display: flex;
			gap: 20rpx;
			z-index: 10;
			
			.control-btn {
				flex: 1;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 12rpx;
				border-radius: 45rpx;
				border: none;
				transition: all 0.3s;
				box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
				
				text {
					font-size: 32rpx;
					font-weight: 600;
				}
				
				&.restart {
					background: linear-gradient(135deg, #4CAF50 0%, #45A049 100%);
					color: #FFFFFF;
					box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.2);
					
					&:disabled {
						background: #CCCCCC;
						box-shadow: none;
					}
				}
				
				&.quit {
					background: linear-gradient(135deg, #FF5252 0%, #F44336 100%);
					color: #FFFFFF;
					box-shadow: 0 4rpx 12rpx rgba(244, 67, 54, 0.2);
				}
				
				&:active {
					transform: scale(0.95);
					opacity: 0.9;
				}
				
				&:disabled {
					opacity: 0.7;
					transform: none;
				}
				
				text {
					font-size: 28rpx;
					font-weight: 500;
				}
			}
		}
	}
	
	@keyframes bounce {
		0%, 100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-8rpx);
		}
	}
	
	@keyframes shake {
		10%, 90% {
			transform: translate3d(-2rpx, 0, 0);
		}
		20%, 80% {
			transform: translate3d(4rpx, 0, 0);
		}
		30%, 50%, 70% {
			transform: translate3d(-8rpx, 0, 0);
		}
		40%, 60% {
			transform: translate3d(8rpx, 0, 0);
		}
	}
	
	// 恐怖游戏特效
	@keyframes flicker {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.3; }
	}
	
	@keyframes pulse {
		0% { transform: scale(1); }
		50% { transform: scale(1.05); }
		100% { transform: scale(1); }
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	@keyframes float {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-10rpx); }
	}
	
	@keyframes particle-float {
		0% {
			transform: translate(0, 0) scale(1);
			opacity: 0;
		}
		50% {
			opacity: 0.8;
		}
		100% {
			transform: translate(var(--tx), var(--ty)) scale(0);
			opacity: 0;
		}
	}
	
	.loading-animation {
		margin: 20rpx 0;
		
		.loading-container {
			position: relative;
			width: 120rpx;
			height: 120rpx;
			margin: 0 auto;
			
			.loading-circle {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 80rpx;
				height: 80rpx;
				border: 4rpx solid rgba(139, 92, 255, 0.2);
				border-top-color: #8B5CFF;
				border-radius: 50%;
				animation: spin 1s linear infinite;
			}
			
			.loading-text {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				font-size: 24rpx;
				color: #8B5CFF;
				white-space: nowrap;
				animation: float 2s ease-in-out infinite;
			}
			
			.loading-particles {
				position: absolute;
				width: 100%;
				height: 100%;
				
				.particle {
					position: absolute;
					width: 8rpx;
					height: 8rpx;
					background: #8B5CFF;
					border-radius: 50%;
					opacity: 0;
					
					@for $i from 1 through 6 {
						&:nth-child(#{$i}) {
							--tx: #{random(60) - 30}rpx;
							--ty: #{random(60) - 30}rpx;
							left: calc(50% + #{random(20) - 10}rpx);
							top: calc(50% + #{random(20) - 10}rpx);
							animation: particle-float #{1 + random() * 0.5}s ease-in-out infinite;
							animation-delay: #{random() * 0.5}s;
						}
					}
				}
			}
		}
	}
	
	.horror-mode {
		background: linear-gradient(180deg, #1A1A1A 0%, #000000 100%);
		
		&::before,
		&::after {
			display: none;
		}
		
		.content-wrapper {
			background: transparent;
		}
		
		.game-interface {
			background: rgba(0, 0, 0, 0.8);
			min-height: 100vh;
			margin: 0 -30rpx;
			padding-top: calc(100rpx + env(safe-area-inset-top));
			
			.pet-container {
				margin-top: 20rpx;
				
				.pet-image {
					filter: grayscale(0.8) brightness(0.7);
					box-shadow: 0 0 20rpx rgba(255, 0, 0, 0.2);
				}
				
				.pet-name-tag {
					background: rgba(0, 0, 0, 0.8);
					border: 1px solid rgba(255, 0, 0, 0.3);
					box-shadow: 0 0 15rpx rgba(255, 0, 0, 0.2);
					
					text {
						color: #fff;
					}
				}
			}
		}
	}
	
	@keyframes fade {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.5; }
	}
</style> 